<template>
  <div class="data-table-section">
    <div class="table-card">
      <div class="table-header">
        <h3>{{ title }}</h3>
      </div>
      
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th v-for="column in columns" :key="column.key">
                {{ column.title }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in paginatedData" :key="item.id">
              <td v-for="column in columns" :key="column.key">
                <template v-if="column.key === 'status'">
                  <span class="status-badge" :class="getStatusClass(item[column.key])">
                    {{ item[column.key] }}
                  </span>
                </template>
                <template v-else-if="column.key === 'actions'">
                  <div class="actions">
                    <button class="action-link" @click="$emit('view-detail', item)">
                      <i class="icon-detail"></i>
                      <span>详情</span>
                    </button>
                    <button class="action-link" @click="$emit('mark-processed', item)">
                      <i class="icon-mark"></i>
                      <span>标记处理</span>
                    </button>
                  </div>
                </template>
                <template v-else-if="column.key === 'pressure'">
                  <span class="pressure-value">{{ item[column.key] }}</span>
                </template>
                <template v-else>
                  {{ item[column.key] }}
                </template>
              </td>
            </tr>
          </tbody>
        </table>
        
        <!-- 分页 -->
        <div class="pagination">
          <span class="pagination-info">共 {{ totalRecords }} 条记录</span>
          <div class="pagination-controls">
            <button class="page-btn" @click="prevPage" :disabled="currentPage === 1">‹</button>
            
            <button 
              v-for="page in visiblePages" 
              :key="page"
              class="page-btn"
              :class="{ active: page === currentPage }"
              @click="goToPage(page)"
            >
              {{ page }}
            </button>
            
            <button class="page-btn" @click="nextPage" :disabled="currentPage === totalPages">›</button>
            
            <select class="page-size" v-model="pageSize" @change="onPageSizeChange">
              <option :value="10">10 / page</option>
              <option :value="20">20 / page</option>
              <option :value="50">50 / page</option>
            </select>
            
            <span>Go to</span>
            <input 
              type="number" 
              class="page-input" 
              v-model.number="jumpPage"
              @keyup.enter="jumpToPage"
              :min="1"
              :max="totalPages"
            />
            <span>Page</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
  props: {
    title: {
      type: String,
      default: '数据列表'
    },
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      jumpPage: 1
    }
  },
  computed: {
    totalRecords() {
      return this.data.length;
    },
    totalPages() {
      return Math.ceil(this.totalRecords / this.pageSize);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.data.slice(start, end);
    },
    visiblePages() {
      const pages = [];
      const maxVisible = 5;
      let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
      let end = Math.min(this.totalPages, start + maxVisible - 1);
      
      if (end - start + 1 < maxVisible) {
        start = Math.max(1, end - maxVisible + 1);
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      return pages;
    }
  },
  methods: {
    getStatusClass(status) {
      const statusMap = {
        '严重异常': 'severe',
        '轻微异常': 'minor',
        '正常': 'normal'
      };
      return statusMap[status] || 'normal';
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    goToPage(page) {
      this.currentPage = page;
    },
    jumpToPage() {
      if (this.jumpPage >= 1 && this.jumpPage <= this.totalPages) {
        this.currentPage = this.jumpPage;
      }
    },
    onPageSizeChange() {
      this.currentPage = 1;
    }
  },
  emits: ['view-detail', 'mark-processed']
}
</script>

<style scoped>
.data-table-section {
  width: 100%;
}

.table-card {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  padding: 15px 24px;
  border-bottom: 1px solid #F0F0F0;
}

.table-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  margin: 0;
}

.table-container {
  padding: 0 24px 24px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.data-table th {
  background: #FAFAFA;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  font-weight: 600;
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #F0F0F0;
}

.data-table th:first-child {
  border-top-left-radius: 8px;
}

.data-table th:last-child {
  border-top-right-radius: 8px;
}

.data-table td {
  padding: 16px;
  border-bottom: 1px solid #F0F0F0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
}

.pressure-value {
  font-weight: 500;
}

.status-badge {
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 12px;
  color: #FFFFFF;
}

.status-badge.severe {
  background: #FF4D4F;
}

.status-badge.minor {
  background: #FAAD14;
}

.status-badge.normal {
  background: #52C41A;
}

.actions {
  display: flex;
  gap: 8px;
}

.action-link {
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 8px;
  border-radius: 4px;
}

.action-link:hover {
  background: rgba(0, 0, 0, 0.04);
}

.icon-detail::before { content: "👁️"; }
.icon-mark::before { content: "✓"; }

/* 分页 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 0 24px;
}

.pagination-info {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: #FFFFFF;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.page-btn.active {
  background: #FFFFFF;
  border: 1px solid #1677FF;
  color: #1677FF;
  font-weight: 600;
}

.page-size {
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.page-input {
  width: 44px;
  height: 24px;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 14px;
  text-align: center;
}
</style>
